<script setup lang="ts">
import * as THREE from 'three'
import { ref, onMounted } from 'vue'

const domEl = ref(null)

const initCanvas = (domEl) => {
  const canvas = domEl
  const renderer = new THREE.WebGLRenderer({antialias: true, canvas})

  const camera = new THREE.PerspectiveCamera(40, 2, 0.1, 1000)

  camera.position.set( 0, 50, 0 )
  camera.up.set( 0, 0, 1 )
  camera.lookAt( 0, 0, 0 )

  const scene = new THREE.Scene()

  {
    const color = 0xFFFFFF
    const intensity = 500
    const light = new THREE.PointLight( color, intensity )
    scene.add( light )
  }

  const objects = []

  const sphereGeometry = new THREE.SphereGeometry( 1, 6, 6 )

  const solarSystem = new THREE.Object3D()
  scene.add( solarSystem )
  objects.push( solarSystem )

  const sunMaterial = new THREE.MeshPhongMaterial( { emissive: 0xFFFF00 } )
  const sunMesh = new THREE.Mesh( sphereGeometry, sunMaterial )
  sunMesh.scale.set( 5, 5, 5 )
  solarSystem.add( sunMesh )
  objects.push( sunMesh )

  const earthOrbit = new THREE.Object3D()
  earthOrbit.position.x = 10
  solarSystem.add( earthOrbit )
  // objects.push( earthOrbit )

  const earthMaterial = new THREE.MeshPhongMaterial( { color: 0x2233FF, emissive: 0x112244 } )
  const earthMesh = new THREE.Mesh( sphereGeometry, earthMaterial )
  earthOrbit.add( earthMesh )
  objects.push( earthMesh )

  const moonOrbit = new THREE.Object3D()
  moonOrbit.position.x = 2
  earthOrbit.add( moonOrbit )

  const moonMaterial = new THREE.MeshPhongMaterial( { color: 0x888888, emissive: 0x222222 } )
  const moonMesh = new THREE.Mesh( sphereGeometry, moonMaterial )
  moonMesh.scale.set( .5, .5, .5 )
  moonOrbit.add( moonMesh )
  objects.push( moonMesh )

  // add an AxesHelper to each node
  objects.forEach( ( node ) => {

    const axes = new THREE.AxesHelper()
    axes.material.depthTest = false
    axes.renderOrder = 1
    node.add( axes )

  } )

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement
    const pixelRatio = window.devicePixelRatio
    const width = canvas.clientWidth * pixelRatio | 0
    const height = canvas.clientHeight * pixelRatio | 0
    const needResize = canvas.width !== width || canvas.height !== height
    if (needResize) {
      renderer.setSize(width, height, false)
    }
    return needResize
  }

  function render(time) {
    time *= 0.001

    if ( resizeRendererToDisplaySize( renderer ) ) {

      const canvas = renderer.domElement
      camera.aspect = canvas.clientWidth / canvas.clientHeight
      camera.updateProjectionMatrix()

    }

    objects.forEach( ( obj ) => {

      obj.rotation.y = time

    } )

    renderer.render(scene, camera)

    requestAnimationFrame(render)
  }

  requestAnimationFrame(render)
}

onMounted(() => {
  initCanvas(domEl.value)
})

</script>

<template>
  <canvas ref="domEl" class="w-full h-full"></canvas>
</template>

<style scoped lang="scss">

</style>